<template>
    <div class="login-page">
        <div class="login-nav">
            <el-dropdown class="item" @command="langChange">
                <span class="el-dropdown-link">
                    <img src="@/assets/svg/earth.svg" alt="">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command='zh'>中文简体</el-dropdown-item>
                    <el-dropdown-item command='en'>English</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-row class="login-container">
      <el-col :span="14" class="cover">
        <img src="@/assets/images/loginwallpaper.jpg" alt="123" style="max-width: none !important">
      </el-col>
      <transition name="el-zoom-in-center">
        <el-col v-show="!transitionPage" :span="10">
          <div class="form">
            <div>
              <div class="logo">
                <img src="@/assets/svg/tree.svg" alt="">
              </div>
              <!-- <div class="title">
                <span>{{$t('login.edenPart1')}}</span>
                <span class="tip">{{$t('login.edenPart2')}}</span>
              </div> -->
            </div>
            
            <div class="login-form">
              <el-form :model="form" ref="ruleForm">
                <el-form-item prop="username">
                  <el-input :placeholder="$t('login.userplaceholder')" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input :placeholder="$t('login.pwdplaceholder')" type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item class="btn">
                  <el-button :loading="loading" type="primary" @click="handleLogin('ruleForm')">{{$t('login.btn')}}</el-button>
                </el-form-item>
                <el-form-item class="btn">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-checkbox v-model="form.remember">{{$t('login.remember')}}</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                      <!-- <p class="forget" @click="transition">{{$t('login.forgetpwd')}}</p> -->
                      <!-- <p class="forget">
                        <el-dropdown class="item" @command="transition">
                          <span class="el-dropdown-link">{{$t('login.register_btn')}}<i class="el-icon-arrow-down el-icon-arrow-right"></i></span>
                          <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item command='zh'>{{$t('login.register_btn')}}</el-dropdown-item>
                              <el-dropdown-item command='forget'>{{$t('login.forgetpwd')}}</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </p> -->
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
      </transition>
    </el-row>
    </div>
</template>
<script>
import conf from '@/components/api/config'
import {axget,axpost} from '@/components/api/index'
export default {
    data() {
        return {
            loading: false,
            transitionPage:false,
            form: {
                username: '',
                password: '',
                remember:false
            }
        }
    },
    methods: {
        langChange(string){
            let tem = 'zh';
            switch(string){
                case 'zh':
                    tem = string
                    break
                case 'en':
                    tem = string
                    break
                default:
                    break
            }
            localStorage.setItem('lang',tem)
            this.$i18n.locale = tem
        },
        handleLogin(form){
            if(this.form.username == '' || this.form.password == ''){
              this.$notify({
                  type: 'warning',
                  title:'提示',
                  message: '账号或者密码还没有填写!'
              })
              return false
            }
            this.loading = true
            axpost('/login',this.form).then(res=>{
              if(res){
                localStorage.setItem('user_id', res.ID)
                localStorage.setItem('name', res.name)
                localStorage.setItem('phone', res.phone)
                localStorage.setItem('state', res.status)
                localStorage.setItem('loginTime', parseInt(new Date().getTime() / 1000))
                this.$notify({
                  title: '提示',
                  message: '登陆成功'
                })
                this.$router.push({
                  path:'/home'
                })
                this.loading = false
              }else{
                this.loading = false
              }
            }).catch(()=>{
              this.loading = false
            })
        },
        transition(){
            this.transitionPage = !this.transitionPage
        }
    },
    created() {
        // console.log(this.$t('tags.handle'))
    },
}
</script>